<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html>
<head>
	<title>我的账户</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH}content/scripts/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH}content/css/ratchet.min.css?v=1.7">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH}content/css/storefront.css">
	<script src="${ROOT_PATH}content/scripts/jquery-1.10.1.min.js"></script>
	<script src="${ROOT_PATH}content/scripts/juery.hammer.js"></script>
	<script src="${ROOT_PATH}content/scripts/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<section>
		<div class="container-fluid text-center" style="color: white;">
			<div id="accountlink" class="row" style="margin: 25px 0;">
				<img alt="..."  src="${member.memberImageUrl.value}" onerror="this.src='${ROOT_PATH}content/images/p1_head.jpg'" style="width: 30%;" class="img-circle">
			</div>
			<div class="row" style="margin-top: 40px;color: #B89D62;">
				<div class="col-xs-12">${member.membername.value}</div>
			</div>
			<div class="row" style="margin-top: 15px;color: #B89D62;">
				<div class="col-xs-12">${member.cardtypeName.value}</div>
			</div>
			<div id="onorder" class="row" style="margin-top: 40px;">
				<div class="col-xs-10 text-left" style="padding-left: 20px;">预约</div>
				<div class="col-xs-2">
					<img alt="..." src="${ROOT_PATH}content/images/p1_ckqb.png" style="width: 55%;" class="img-responsive">
				</div>
			</div>
			<div id="online" class="row" style="margin-top: 20px;">
				<div class="col-xs-10 text-left" style="padding-left: 20px;">在线订单</div>
				<div class="col-xs-2">
					<img alt="..." src="${ROOT_PATH}content/images/p1_ckqb.png" style="width: 55%;" class="img-responsive">
				</div>
			</div>
			<div class="row" style="margin: 30px -10px -5px -10px;background-color: #303030;padding: 10px 0;">
				<div class="col-xs-3 text-left">卡片</div>
				<div class="col-xs-6 text-left">${member.id.value.cardno.value}</div>
				<div id="switchCard" class="col-xs-3 text-right">切换</div>
			</div>
			<div class="row" style="margin: 0.5% -10px -10px -10px;padding: 10px 0;line-height: 50px;">
				<div class="col-xs-4" style="background-color: #303030;width: 32%;">余额</div>
				<div class="col-xs-4" style="background-color: #303030;margin: 0 2%;width: 32%;">赠送</div>
				<div class="col-xs-4" style="background-color: #303030;width: 32%;">积分</div>
			</div>
			<div class="row" style="margin: 0% -10px 0px -10px;line-height: 50px;color: #B89D62;font-size: 21px;">
				<div class="col-xs-4" style="background-color: #303030;width: 32%;"><fmt:formatNumber value="${member.account2Amt.value}" pattern="#"/></div>
				<div class="col-xs-4" style="background-color: #303030;margin: 0 2%;width: 32%;"><fmt:formatNumber value="${member.account6Amt.value}" pattern="#"/></div>
				<div class="col-xs-4" style="background-color: #303030;width: 32%;"><fmt:formatNumber value="${member.account3Amt.value}" pattern="#"/></div>
			</div>
			<div class="row" style="padding: 20px;">
				<div id="consumes" class="col-xs-6">消费历史</div>
				<div id="courses" class="col-xs-6">疗程明细</div>
			</div>
			<form id="doForm" action="${ROOT_PATH}UCenter/account" method="post">
				<input type="hidden" id="memberImageUrl" name="memberImageUrl"  value="${member.memberImageUrl.value}" />
				<input type="hidden" id="membername" name="membername"  value="${member.membername.value}" />
				<input type="hidden" id="cardno" name="cardno"  value="${member.id.value.cardno.value}" />
				<input type="hidden" id="memberphone" name="memberphone"  value="${member.memberphone.value}" />
				<input type="hidden" id="memberpaperworkno" name="memberpaperworkno"  value="${member.memberpaperworkno.value}" />
				<input type="hidden" id="memberbirthday" name="memberbirthday"  value="${member.memberbirthday.value}" />
				<input type="hidden" id="password" name="password"  value="${member.password.value}" />
			</form>
			 <ul class="list-group" style="width: 200px; color: black;position: absolute;top: 40%;display: none;">
			 	<h4 class="list-group-item list-group-item-heading">请选择卡号或新增</h4>
			 	<c:forEach var="card" items="${cards}">
				   	<li class="list-group-item" data-val="${card}">${card}</li>
			 	</c:forEach>
			   	<li class="list-group-item" data-val="0" style="text-align: left;">
			   		<div id="bandbtn" style="display: inline;border-right: 1px solid gray;">新增会员卡&nbsp;&nbsp;</div>
			   		<div id="closebtn" style="display: inline;">&nbsp;&nbsp;&nbsp;关闭&nbsp;&nbsp;&nbsp;</div>
			   	</li>
			 </ul>
		</div>
	</section>
	<script type="text/javascript">
		$(function(){
			/* var openids=["orCjajnADjE1mhSo3K5gHzODwdeI",""];
		   	 var contiansId=false;
		   	 for(var i=0;i<openids;i++){
		   		 if(openids[i]=="${openid }"){
		   			 contiansId=true;
		   			 break;
		   		 }
		   	 }
		   	 if(!contiansId){
		   		 $("section").hide();
		   		 alert("内测期间，未受邀请用户暂时无法使用，请您见谅！");
		   	 } */
			$(".list-group").css("left", ($(document).width()-200)/2);
			$("#onorder").click(function(){
				window.location.href="${ROOT_PATH}UCenter/orders";
			});
			
			$("#online").click(function(){
				window.location.href="${ROOT_PATH}UCenter/online";
			});
			
			$("#consumes").click(function(){
				window.location.href="${ROOT_PATH}UCenter/consumes/"+$("#cardno").val();
			});
			
			$("#courses").click(function(){
				window.location.href="${ROOT_PATH}UCenter/courses/"+$("#cardno").val();
			});
			
			$("#accountlink").click(function(){
				$("#doForm").attr("action", "${ROOT_PATH}UCenter/account");
				$("#doForm").submit();
			});
			
			$("#switchCard").click(function(){
				$("ul.list-group").fadeIn();
			});
			$("li.list-group-item").click(function(){
				$("ul.list-group").hide();
				var cardno=$(this).attr("data-val");
				if(cardno!="0"){
					window.location.href="${ROOT_PATH}UCenter/my?cardno="+cardno;
				}
			});
			$("#bandbtn").click(function(){
				window.location.href="${ROOT_PATH}UCenter/index/binding";
			});
			$("#closebtn").click(function(){
				$("ul.list-group").fadeOut();
			});
		});
	</script>
</body>
</html>